<template>
    <div class="bankDetail">
        <div class="top">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item  class="font-gray hand" :to="{ path: 'bank' }">银行卡</el-breadcrumb-item>
                <el-breadcrumb-item class="hand font-white">详情</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button class="pull-right" @click="modalState = true">
                解绑银行卡
            </el-button>
        </div>

        <div class="text-center">
            <h3>中国建设银行</h3>
            <p class="font-gray">储蓄卡</p>
            <p class="cardNum">****&#x3000;&#x3000;****&#x3000;&#x3000;****&#x3000;&#x3000;9090</p>
        </div>
        
      
       <el-row>
            <el-col :span="8" >
                    <span class="font-gray">预留手机号</span>             
                    </el-col>
            <el-col :span="16" class="text-right">
                    13623041755
               </el-col>
       </el-row>
        <div class="modal-bg" v-show="modalState">  
            <div class="modal-bank text-center">
                <i class="el-icon-close" @click="closeModal" style="position: absolute;right: 10px;top: 15px;"></i>
                <h4>银行卡预留手机号</h4>
                <h3>1166372522</h3>
                <el-form>
                    <el-form-item label="" prop="verifyCode">
                        <el-input  prefix-icon=""  v-model="verifyCode"  placeholder="输入验证码">              
                            <el-button slot="append"
                                v-if="!countDown"
                                class="verification "                   
                                @click.prevent="getVerify()"
                                style="color:#fff;">
                                获取验证码
                                </el-button>
                                <el-button slot="append"
                                v-else
                                disabled="disabled">
                                已发送({{countDown}}s)
                                </el-button>
                        </el-input>
                    </el-form-item> 
                    <el-button class="aqua-button">确认</el-button>
                </el-form>
            </div>  
        </div>
    </div>
</template>
<script>
import {getVerifyCode} from '@/ajax/index'
export default {
    name:'BankDetail',
    data(){
        return{
            phone:'16637675905',
            verifyCode: '',
            countDown: 0,
            modalState:false,
        }
    },
    methods:{
        closeModal(){
            this.modalState = false;
        },
        async getVerify() {        
              const param = {
                    'phoneNum': this.phone
              }
              let result = await getVerifyCode(param);
              if(result.code === '200' && result.data.state === '1'){
                    this.loginForm.verifyCode = result.data.data;
                    console.log(this.verifyCode);
              }else{
                    this.$message({
                        message:result.data.message,
                        type: 'error',
                        duration:2000,               
                    });
                    return false;
              }
              this.countDown = 60;
              this.intervalId = setInterval(() => {
                this.countDown--;
                // 判断
                if (this.countDown === 0) {
                  clearInterval(this.intervalId);
                }
              }, 1000);
      },
    }
}
</script>


<style>
    .bankDetail .el-breadcrumb{display: inline-block;font-size: 14px;line-height: 46px;}
    .bankDetail .el-breadcrumb__inner,.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{color: #72739c!important;}
    .bankDetail .el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{color: #fff!important;cursor: pointer!important;}
    .bankDetail .modal-bank .el-form-item__content {line-height: 40px; position: relative;font-size: 14px;width: 80%;margin: 20px auto;}
    .bankDetail .modal-bank .el-form-item__content .el-input-group {background-color: #242645;}
    .bankDetail .modal-bank .el-input-group__append{background-color: #242645;border: none;vertical-align: 0px;border-left: 1px solid #fff;}
    .bankDetail .modal-bank .el-input-group--append .el-input__inner{background-color: #242645;border: none;}


</style>

<style lang="less" scoped>
.bankDetail{
    margin-top:40px;
    position: relative;
    .top{line-height: 40px;height: 50px;}
    .el-button{right: 24px;top: 25px;margin-top: 4px; color: #E53737;background: none;border: 1px solid #E53737;}
    h3{font-size: 20px;font-weight: lighter;line-height: 40px;margin-top: 80px;}
    .cardNum{margin-top: 30px;font-size: 16px;letter-spacing:2px; text-align: center}
    .el-row{margin: 120px auto; padding: 0 20px;width: 500px; border-radius: 4px;line-height: 54px;background-color: #242645; 
    }
    .modal-bg{position: fixed;width: 100%;height: 100%;left:0;top:0;background-color: rgba(255, 255, 255, 0.3)}
    .modal-bank{position: absolute;top: 200px; left: calc(50% - 200px);border-radius: 4px; background-color: #1d1e3b;width: 400px;
    h4{font-size: 12px;color: #c3c4ea;line-height: 30px;margin-top: 40px;font-weight: lighter;}
    h3{margin-top: 0px;}
    .el-button{margin-top: 0px;color: #E53737;background: none;border: none}
    .aqua-button{
        padding: 14px  50px;border:none;outline: none; color: #fff;margin-bottom: 20px;
        background: -webkit-linear-gradient(left, #77e0f7 ,#29a8d1); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #77e0f7,#29a8d1) ;/* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #77e0f7,#29a8d1); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #77e0f7 , #29a8d1); /* 标准的语法 */
        }
    }
}
</style>

